<template>
    <div>
        <header class="mui-bar mui-bar-nav">
            <router-link tag="span" to="/home" class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></router-link>
            <h1 class="mui-title" style="font-family: fantasy;">添加笔记</h1>
            <span style="line-height: 45px;float: right;" @click="save">保存</span>
        </header>
        <div class="mui-content">
            <div class="top-nav" style="width: 250px; height: 81px; margin: 20px auto; border: 1px solid rgb(228, 227, 227);background-color: #f1f1f1">
                <div style="width: 100%;">
                    <div class="op-item" style="background-color:rgb(249, 247, 247);">
                        <div style="width: 100%;height: 20px;background-color: #797777;border-radius: 12px 12px 0 0 ;color:black; font-size: 18px;
                        text-align: center;font-weight: 700;">{{curM}}</div>
                        <div style="width: 100%;height: 30px;font-size: 23px;text-align: center;line-height: 30px;font-weight: 700;color:black;">{{curD}}</div>
                        <div style="text-align: center;width: 100%;height: 27px;border-radius: 0 0 12px 12px;line-height: 27px;font-size: 12px;color:black;">{{curDate}}</div>
                    </div>
                    <div class="op-item">
                        <input id="upload_file" type="file" style="display: none;" accept='image/*' name="file" @change="getImgBase()" />

                        <span class="mui-icon mui-icon-image" style="width: 40px;eight: 40px;font-size: 37px;
                        margin: 20px 20px;color: #b1aeae;" @click="fileClick()"></span>
                    </div>
                    <div class="op-item">
                        <span class="mui-icon mui-icon-mic" style="width: 40px;font-size: 37px;margin: 20px 20px;color: #b1aeae;;"></span>
                    </div>
                </div>
            </div>
            <div class="note-content">
                <div class="note-title">
                    <input type="text" class="mui-input-clear" v-model="title" placeholder="#标题" style="border:none;border-bottom:1px solid #ccc;">
                </div>

                <!-- <div class="note-body"> -->
                    <div class="img-list">
                        <div class="item" v-for="(item, index) in imgBase64">
                            <span class="mui-icon mui-icon-minus" @click="fileDel(index)" style="position: absolute; margin-left: 186px; margin-top: -10px;color: black;font-weight: 700;"></span>
                            <!-- <span class="cancel-btn" @click="delImg(index)">x</span> -->
                            <img :src="item" style="display: inline-block;max-width: 200px;padding: 8px;border: 1px solid #ccc;">
                        </div>
                    </div>

                    <div class="note-content" id="note-content" contenteditable="true" style="min-height: 300px;color: black;background-color: #fff;"></div>
                <!-- </div> -->
            </div>
        </div>

    </div>

</template>

<script>

    export default {
        data() {
            return {
                imgBase64: [],
                title: '',
                content: '',
                curM: '',
                curD: '',
                curDate: ''

            }
        },
        methods: {
            //调用相册&相机
            fileClick: function () {
                if (this.imgBase64.length < 6) {
                    $('#upload_file').click();
                }

            },
            //获取图片base64实现预览
            getImgBase() {
                var _this = this;
                var event = event || window.event;
                var file = event.target.files[0];
                var reader = new FileReader();
                //转base64
                reader.onload = function (e) {
                    _this.imgBase64.push(e.target.result);
                }
                reader.readAsDataURL(file);
            },
            //删除图片
            delImg(index) {
                this.imgBase64.splice(index, 1);
            },
            genID(length) {
                return Number(Math.random().toString().substr(3, length) + Date.now()).toString(36);
            },
            //保存日记到localstorage
            save: function () {
                var userId = sessionStorage.getItem('userId');
                var imgs;
                var imgs = this.imgBase64;
                for (let i = 0; i < imgs.length; i++) {
                    var img = imgs[i];
                }
                //时间
                var date = new Date().Format("yyyy-MM-dd HH:mm:ss");
                var title = this.title;
                var content = $('#note-content').text();
                var id = this.genID();
                if (!title && !content && imgs.length == 0) {
                    this.mui.toast('保存成功', { duration: 'long', type: 'div' });
                    this.$router.push('/home');
                    return;
                } else {
                    var noteObj = {
                        'title': title,
                        'content': content,
                        'imgs': imgs,
                        'date': date,
                        'userId': userId,
                        'id': id
                    };
                    var data = localStorage.getItem('note');
                    var noteData = JSON.parse(data);
                    if (noteData && noteData.length > 0) {
                        noteData.push(noteObj);
                    } else {
                        noteData = [];
                        noteData.push(noteObj);
                    }
                    localStorage.setItem('note', JSON.stringify(noteData));
                    this.mui.toast('保存成功', { duration: 'long', type: 'div' });
                    this.$router.push('/home');
                }

            }
        },
        created: function () {
            console.log(sessionStorage.getItem('user'));
            this.mui('body').on('tap', 'a', function () { document.location.href = this.href; });
            this.mui('body').on('click', 'a', function () { document.location.href = this.href; });
            // localStorage.removeItem('note');
            var userId = this.common.getCookie('userName');

            var noteData = JSON.parse(localStorage.getItem('note'));
            if (noteData != null && noteData.length > 2) {
                for (let i = 0; i < noteData.length; i++) {
                    const data = noteData[i];
                    if (data != null && data.userId === userId) {
                        this.notes.push(data);
                    }
                }
            }

            //初始化时间
            var date = new Date();
            this.curD = date.Format('d');
            this.curM = date.Format('M');
            var ee = date.getDay();
            switch (ee) {
                case 0:
                    this.curDate = '星期日' + date.Format('H:m:ss');
                    break;
                case 1:
                    this.curDate = '星期一' + date.Format('H:m:ss');
                    break;
                case 2:
                    this.curDate = '星期二' + date.Format('H:m:ss');
                    break;
                case 3:
                    this.curDate = '星期三' + date.Format('H:m:ss');
                    break;
                case 4:
                    this.curDate = '星期四' + date.Format('H:m:ss');
                    break;
                case 5:
                    this.curDate = '星期五' + date.Format('H:m:ss');
                    break;
                case 6:
                    this.curDate = '星期六' + date.Format('H:m:ss');
                    break;
            }
        },
        filters: {
            snappedBody: function (value) {
                return value.slice(0, 100) + '...';
            }
        },
    }
    Date.prototype.Format = function (fmt) {
        var o = {
            "M+": this.getMonth() + 1, //月份 
            "d+": this.getDate(), //日 
            "H+": this.getHours(), //小时 
            "m+": this.getMinutes(), //分 
            "s+": this.getSeconds(), //秒 
            "q+": Math.floor((this.getMonth() + 3) / 3), //季度 
            "S": this.getMilliseconds() //毫秒 ,

        };
        if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
        for (var k in o)
            if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
        return fmt;
    }

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    html {
        touch-action: none;
    }

    header {
        background-color: #51a2e2;
        color: #fff;
    }

    .mui-content {
        background: #fff;
    }

    h1 {
        color: #fff;
    }

    .top-nav li:nth-child(1) {
        margin-left: -41px;
    }

    .top-nav {
        font-size: 0px;
    }

    .op-item {
        width: 81px;
        height: 76px;
        float: left;
        background-color: #e6e6e6;
        border-radius: 12px;
        margin-left: 1px;
        margin-top: 1px;
    }

    .note-content {
        padding: 0 10px;
    }
</style>